import type { AppRouteModule } from '/@/router/types';

import { getParentLayout, LAYOUT } from '/@/router/constant';
import { t } from '/@/hooks/web/useI18n';

const comp: AppRouteModule = {
  path: '/comp',
  name: 'Comp',
  component: LAYOUT,
  redirect: '/comp/basic',
  meta: {
    orderNo: 20,
    icon: 'ion:layers-outline',
    title: t('routes.comp.comp.comp'),
  },
  children: [
    {
      path: 'basic',
      name: 'BasicDemo',
      component: getParentLayout('BasicDemo'),
      meta: {
        title: t('routes.comp.comp.basic'),
      },
      children: [
        {
          path: 'button',
          name: 'ButtonDemo',
          component: () => import('/@/views/comp/button/index.vue'),
          meta: {
            title: t('routes.comp.basic.button'),
          },
        },
        {
          path: 'icon',
          name: 'IconDemo',
          component: () => import('/@/views/comp/icon/index.vue'),
          meta: {
            title: t('routes.comp.basic.icon'),
          },
        },
        {
          path: 'msg',
          name: 'MsgDemo',
          component: () => import('/@/views/comp/msg/index.vue'),
          meta: {
            title: t('routes.comp.basic.msg'),
          },
        },
        {
          path: 'tabs',
          name: 'TabsDemo',
          component: () => import('/@/views/comp/tabs/index.vue'),
          meta: {
            title: t('routes.comp.basic.tabs'),
            hideChildrenInMenu: true,
          },
          children: [
            {
              path: 'detail/:id',
              name: 'TabDetail',
              component: () => import('/@/views/comp/tabs/TabDetail.vue'),
              meta: {
                currentActiveMenu: '/comp/basic/tabs',
                title: t('routes.comp.basic.tabDetail'),
                hideMenu: true,
                dynamicLevel: 3,
                realPath: '/comp/basic/tabs/detail',
              },
            },
          ],
        },
      ],
    },
    {
      path: 'form',
      name: 'FormDemo',
      redirect: '/comp/form/basic',
      component: getParentLayout('FormDemo'),
      meta: {
        title: t('routes.comp.comp.form'),
      },
      children: [
        {
          path: 'basicForm',
          name: 'FormBasicDemo',
          component: () => import('/@/views/comp/form/index.vue'),
          meta: {
            title: t('routes.comp.basic.form'),
          },
        },
        {
          path: 'useForm',
          name: 'UseFormDemo',
          component: () => import('/@/views/comp/form/UseForm.vue'),
          meta: {
            title: t('routes.comp.basic.useForm'),
          },
        },
        {
          path: 'refForm',
          name: 'RefFormDemo',
          component: () => import('/@/views/comp/form/RefForm.vue'),
          meta: {
            title: t('routes.comp.basic.refForm'),
          },
        },
        {
          path: 'advancedForm',
          name: 'AdvancedFormDemo',
          component: () => import('/@/views/comp/form/AdvancedForm.vue'),
          meta: {
            title: t('routes.comp.basic.advancedForm'),
          },
        },
        {
          path: 'ruleForm',
          name: 'RuleFormDemo',
          component: () => import('/@/views/comp/form/RuleForm.vue'),
          meta: {
            title: t('routes.comp.basic.ruleForm'),
          },
        },
        {
          path: 'dynamicForm',
          name: 'DynamicFormDemo',
          component: () => import('/@/views/comp/form/DynamicForm.vue'),
          meta: {
            title: t('routes.comp.basic.dynamicForm'),
          },
        },
        {
          path: 'customerForm',
          name: 'CustomerFormDemo',
          component: () => import('/@/views/comp/form/CustomerForm.vue'),
          meta: {
            title: t('routes.comp.basic.customerForm'),
          },
        },
        {
          path: 'appendForm',
          name: 'appendFormDemo',
          component: () => import('/@/views/comp/form/AppendForm.vue'),
          meta: {
            title: t('routes.comp.basic.appendForm'),
          },
        },
      ],
    },
    {
      path: 'table',
      name: 'TableDemo',
      redirect: '/comp/table/basic',
      component: getParentLayout('TableDemo'),
      meta: {
        title: t('routes.comp.comp.table'),
      },

      children: [
        {
          path: 'basic',
          name: 'TableBasicDemo',
          component: () => import('/@/views/comp/table/index.vue'),
          meta: {
            title: t('routes.comp.basic.table'),
          },
        },
        {
          path: 'treeTable',
          name: 'TreeTableDemo',
          component: () => import('/@/views/comp/table/TreeTable.vue'),
          meta: {
            title: t('routes.comp.basic.treeTable'),
          },
        },
        {
          path: 'fetchTable',
          name: 'FetchTableDemo',
          component: () => import('/@/views/comp/table/FetchTable.vue'),
          meta: {
            title: t('routes.comp.basic.fetchTable'),
          },
        },
        {
          path: 'fixedColumn',
          name: 'FixedColumnDemo',
          component: () => import('/@/views/comp/table/FixedColumn.vue'),
          meta: {
            title: t('routes.comp.basic.fixedColumn'),
          },
        },
        {
          path: 'customerCell',
          name: 'CustomerCellDemo',
          component: () => import('/@/views/comp/table/CustomerCell.vue'),
          meta: {
            title: t('routes.comp.basic.customerCell'),
          },
        },
        {
          path: 'formTable',
          name: 'FormTableDemo',
          component: () => import('/@/views/comp/table/FormTable.vue'),
          meta: {
            title: t('routes.comp.basic.formTable'),
          },
        },
        {
          path: 'useTable',
          name: 'UseTableDemo',
          component: () => import('/@/views/comp/table/UseTable.vue'),
          meta: {
            title: t('routes.comp.basic.useTable'),
          },
        },
        {
          path: 'refTable',
          name: 'RefTableDemo',
          component: () => import('/@/views/comp/table/RefTable.vue'),
          meta: {
            title: t('routes.comp.basic.refTable'),
          },
        },
        {
          path: 'multipleHeader',
          name: 'MultipleHeaderDemo',
          component: () => import('/@/views/comp/table/MultipleHeader.vue'),
          meta: {
            title: t('routes.comp.basic.multipleHeader'),
          },
        },
        {
          path: 'mergeHeader',
          name: 'MergeHeaderDemo',
          component: () => import('/@/views/comp/table/MergeHeader.vue'),
          meta: {
            title: t('routes.comp.basic.mergeHeader'),
          },
        },
        {
          path: 'nestedTable',
          name: 'nestedTableDemo',
          component: () => import('/@/views/comp/table/NestedTable.vue'),
          meta: {
            title: t('routes.comp.basic.nestedTable'),
          },
        },
        {
          path: 'expandTable',
          name: 'ExpandTableDemo',
          component: () => import('/@/views/comp/table/ExpandTable.vue'),
          meta: {
            title: t('routes.comp.basic.expandTable'),
          },
        },
        {
          path: 'fixedHeight',
          name: 'FixedHeightDemo',
          component: () => import('/@/views/comp/table/FixedHeight.vue'),
          meta: {
            title: t('routes.comp.basic.fixedHeight'),
          },
        },
        {
          path: 'footerTable',
          name: 'FooterTableDemo',
          component: () => import('/@/views/comp/table/FooterTable.vue'),
          meta: {
            title: t('routes.comp.basic.footerTable'),
          },
        },
        {
          path: 'editCellTable',
          name: 'EditCellTableDemo',
          component: () => import('/@/views/comp/table/EditCellTable.vue'),
          meta: {
            title: t('routes.comp.basic.editCellTable'),
          },
        },
        {
          path: 'editRowTable',
          name: 'EditRowTableDemo',
          component: () => import('/@/views/comp/table/EditRowTable.vue'),
          meta: {
            title: t('routes.comp.basic.editRowTable'),
          },
        },
        {
          path: 'authColumn',
          name: 'AuthColumnDemo',
          component: () => import('/@/views/comp/table/AuthColumn.vue'),
          meta: {
            title: t('routes.comp.basic.authColumn'),
          },
        },
      ],
    },
  ],
};

export default comp;
